<template>
  <a-card>
    <p v-if="quData.quType ===1">
      【单选题】{{ quData.content }}
    </p>
    <p v-else-if="quData.quType === 2">
      【多选题】{{ quData.content }}
    </p>
    <p v-else-if="quData.quType === 3">
      【判断题】{{ quData.content }}
    </p>
    <div v-if="quData.quType === 1 ">
      <a-radio-group v-model:value="radioValues">
        <a-radio v-for="an in quData.answerList" :key="an" :value="an.id" >{{ an.content }}</a-radio>
      </a-radio-group>
    </div>
    <!-- 多选题 -->
    <div v-if="quData.quType === 2">
      <a-checkbox-group v-model:value="multiValues">
        <a-checkbox v-for="an in quData.answerList" :key="an" :value="an.id" >{{ an.content }}</a-checkbox>
      </a-checkbox-group>
    </div>
    <div v-if=" quData.quType === 3 ">
      <a-radio-group v-model:value="judgeValues">
        <a-radio v-for="an in quData.answerList" :key="an" :value="an.id" >{{ an.content }}</a-radio>
      </a-radio-group>
    </div>
  </a-card>
  <a-divider/>
</template>
<script>
import {defineComponent, reactive, ref} from 'vue';
import {useRoute} from 'vue-router';
import router from "@/route";

export default defineComponent({
  setup() {
    const quData = ref({});
    const routers = useRoute();
    // const examId = JSON.parse(routers.query.id);
    const examId = "1356425140212076545";
    const quId = ref('');
    const tags = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']);
    const radioValues = ref('');
    const analysisShow = ref(false);
    const answerValues = ref([]);
    const rightValues = ref([]);
    const rightTags = ref([]);

    const handNext = () => {
      // 直接显示下一个
      if (analysisShow.value) {
        // 正确显示下一个
        fetchNextQu()
      } else {
        // 直接判断正确性
        if (rightValues.value.join(',') === answerValues.value.join(',')) {
        alert("回答正确")
          // 正确显示下一个
          fetchNextQu()
        } else {
          // 错误显示解析
          analysisShow.value = true
          alert("回答错误")
        }
      }
    }
    const clearValues = () => {
      answerValues.value = []
      rightValues.value = []
      analysisShow.value = false
      rightTags.value = []
    }

    // 查找试卷详情
    const fetchQuDetail = (id) => {
      // 当前赋值
      quId.value = id
      clearValues()

      // fetchDetail(id).then(response => {
    let  response = {
        "code": 0,
        "data": {
          "analysis": "",
          "answerList": [
            {
              "analysis": "",
              "content": "正确",
              "id": "1461505894155153409",
              "image": "",
              "isRight": true,
              "quId": "1461505894142570497"
            },
            {
              "analysis": "",
              "content": "错误",
              "id": "1461505894159347714",
              "image": "",
              "isRight": false,
              "quId": "1461505894142570497"
            }
          ],
          "content": "咖啡的故乡是非洲吗？",
          "createTime": "2021-11-19 09:25:33",
          "id": "1461505894142570497",
          "image": "",
          "level": 1,
          "quType": 3,
          "remark": "",
          "repoIds": [
            "1265561101609795585"
          ],
          "updateTime": "2021-11-19 09:25:33"
        },
        "msg": "操作成功！",
        "success": true
      }
        // 题目信息
        quData.value = response.data

        // 保存正确答案
        quData.value.answerList.forEach((an, index) => {
          an.abc = tags.value[index]

          // 用户选定的
          if (an.isRight) {
            rightValues.value.push(an.id)
            rightTags.value.push(an.abc)
          }
        })
      // })
    }
    const fetchNextQu = () => {
      // 查找下一个
      // nextQu(examId, quId).then(response => {
     let response = {
        "code": 0,
        "data": {
          "id": "1461505894142570497"
        },
        "msg": "操作成功！",
        "success": true
      }
        fetchQuDetail(response.data.id)
      // })
    }
    fetchNextQu()
    return {
      quData,
      routers,
      examId,
      quId,
      tags,
      radioValues,
      analysisShow,
      answerValues,
      rightValues,
      rightTags,


      fetchNextQu,
      fetchQuDetail,
      clearValues,
    };
  },
});
</script>
<style scoped>
.qu-analysis-line {
  margin-top: 20px;
  border-bottom: #eee 1px solid
}

</style>
